<template>
  <div>
    <div>侦听器</div>
    <hr>
    <div>{{count}}</div>
    <div>{{obj.msg}}</div>
    <!-- <div>{{n1 + '---' + n2}}</div> -->
    <div>{{info.msg}}</div>
    <div>{{info.friend.name}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { ref, watch, reactive } from 'vue'

export default {
  name: 'App',
  setup () {
    // 被侦听的数据必须是响应式的
    const count = ref(0)
    const obj = reactive({
      msg: 'hello'
    })

    // 1. 侦听基本数据类型的变化
    // watch(count, (newValue, oldValue) => {
    //   console.log(newValue, oldValue)
    // })

    // 2. 侦听对象类型数据
    // watch(obj, (v1, v2) => {
    //   // 形参v1和v2都是最新更新的值
    //   console.log(v1, v2)
    //   console.log(v1 === v2)
    //   console.log(obj)
    // })

    // 3. 侦听多个值
    // const n1 = ref(1)
    // const n2 = ref(2)
    // watch([n1, n2], (v1, v2) => {
    //   console.log(v1, v2)
    // })

    // 4. 侦听对象的部分属性
    // const info = reactive({
    //   msg: 'hello',
    //   abc: 'hi'
    // })

    // // 如果被侦听的数据是表达式，那么需要使用函数形式
    // watch(() => info.msg, (v1, v2) => {
    //   console.log(v1, v2)
    // })

    // 5. 侦听配置选项
    const info = reactive({
      msg: 'hello',
      friend: {
        name: 'lisi'
      }
    })

    watch(() => [info.friend, info.msg], (v) => {
      console.log(v)
    }, {
      // 深度侦听对象里面的属性
      deep: true,
      // 首次侦听就触发一次
      immediate: true
    })

    const handleClick = () => {
      // count.value += 1
      // obj.msg = 'nihao'
      // n1.value = 3
      // n2.value = 4
      // info.msg = 'nihao'
      // info.friend.name = 'zhangsan'
      info.msg = 'hi'
    }

    return { count, obj, info, handleClick }
  }
}
</script>
